<template>
  <!-- 创建时间：2023/4/26 -->
  <!-- 作者：admin -->
  <!-- MvPlay组件说明： 视频播放组件-->
    <div class="mv-play">
        <div class="origin-video">
            <video ref="mvVideo"></video>
        </div>
    </div>
</template>

<script>
import {getMvsUrl} from "@/http";
import Plyr from "plyr";
import 'plyr/dist/plyr.css'
import {CHANGEMUSICSTATE, MVLOADINGFINISH} from "@/http/constant";
import {mapMutations} from "vuex";

export default {
    name: "MvPlay",
    props: ['mvDetails'],
    data() {
        return {
            mvInfo: {},
            playVideo: null
        }
    },
    mounted() {
        this.initVideo()
    },
    methods: {
        ...mapMutations(['ShowBottomPlayer']),
        initVideo() {
            const {mvSettings} = this.$store.state
            const {mvVideo} = this.$refs
            const videoOptions = {
                settings: ['quality', 'speed'],
                autoplay: false,
                volume: mvSettings.volume,
                invertTime: false,
                // 禁用右键菜单
                disableContextMenu: true,
                quality: {
                    default: 1080,
                    options: [1080, 720, 480, 240],
                },
                speed: {
                    selected: 1,
                    options: [0.5, 1, 1.5, 2]
                },
                ratio: '16:9'
            }
            this.playVideo = new Plyr(mvVideo, videoOptions)
        },
        // 获取数据
        getMvData(details) {
            const {id, brs, name, cover} = details
            // 可以完整播放的的时候隐藏加载组件
            this.playVideo.on('canplay', () => {
                this.$bus.$emit(MVLOADINGFINISH, {
                    id,
                    isLoading: false
                })
            })
            // 当mv播放的时候停止播放音乐并隐藏播放面板
            this.playVideo.on('play', e => {
                console.log('正在播放')
                // 停止播放音乐
                this.$bus.$emit(CHANGEMUSICSTATE, true)
                // 隐藏音乐面板
                this.ShowBottomPlayer(false)
            })
            const totalQuality = brs.map(item => {
                return getMvsUrl(id, item.br)
            })
            Promise.all(totalQuality).then(res => {
                const mvUrls = res.map(item => {
                    const {data: {url, r}} = item
                    return {
                        src: url,
                        size: r,
                        type: 'video/mp4'
                    }
                })
                this.mvInfo = {
                    ...details,
                    brs: mvUrls
                }
                // 设置视频源
                this.playVideo.source = {
                    type: 'video',
                    title: name,
                    sources: mvUrls,
                    poster: cover
                }

            })
        }
    },
    watch: {
        mvDetails: {
            deep: true,
            handler(newVal) {
                this.getMvData(newVal)
            }
        }
    }
}
</script>

<style scoped lang="less">
@import "@/assets/less/common";

.mv-play {
  .origin-video {
    --plyr-control-radius: 8px;
    --plyr-color-main: @mainColor;
    border-radius: 16px;
    overflow: hidden;
    max-height: 100vh;
  }
}
</style>